<template>
  <div class="channer-edit">
    <!-- 我的频道-------------------------- -->
    <!-- 频道标题 -->
    <van-cell :border="false">
      <div slot="title">我的频道</div>
      <van-button
        class="btnEdit"
        @click="isEdit = !isEdit"
        type="danger"
        plain
        round
        size="mini"
      >{{ isEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <!-- 频道宫格 -->
    <van-grid :gutter="10" class="mypindao">
      <van-grid-item @click="editFn(item,inx)" v-for="(item,inx) in pindaoList" :key="inx">
        <span slot="text" :class="{'gongtext': inx === active}">{{item.name}}</span>
        <i class="iconfont myIcon-guanbi" slot="icon" v-show="isEdit"></i>
      </van-grid-item>
    </van-grid>

    <!-- 所有频道-------------------------- -->
    <!-- 频道标题 -->
    <van-cell :border="false">
      <div slot="title">频道推荐</div>
    </van-cell>
    <!-- 频道宫格 -->
    <van-grid :gutter="10" class="allpindao">
      <van-grid-item
        icon="plus"
        @click="addPindao(item)"
        v-for="(item,inx) in tuijian"
        :key="inx"
        :text="item.name"
      />
    </van-grid>
  </div>
</template>

<script>
// 导入请求所有频道API
import { getAllChannelListAPI } from '@/api/user.js'
// 导入本地存储数据方法
// import { setLocalItem } from '@/utils/localStore.js'
// 加载vuex仓库数据导航
import { mapState } from 'vuex'
export default {
  props: {
    // 我的频道数据列表
    pindaoList: {
      type: Array,
      required: true
    },
    // 点击首页父组件上午频道展示列表后传过来的被点击频道信息下标
    active: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 所有频道列表数据
      allChannelList: [],
      // 是否处于编辑状态变量
      isEdit: false
    }
  },
  computed: {
    // 将vux仓库数据平铺到当前组件
    ...mapState(['userTok']),
    // 计算属性筛选出推荐频道
    // 计算属性会及时根据它的依赖项更新视图数据
    tuijian() {
      // filter和some都相当于js的for循环,嵌套使用相当于双层for循环,外循环执行一次,内循环执行全部
      return this.allChannelList.filter(item =>
        this.pindaoList.some(ele => ele.id !== item.id)
      )
    }
  },
  methods: {
    // 点击我的频道内容实现删除频道或者跳转频道页面方法
    editFn(item, inx) {
      // 如果是编辑状态就在我的频道列表里删除当前频道
      // 如果不是编辑状态就将当前频道的数组下标传给首页,首页再根据传过来的下标切换频道
      if (this.isEdit) {
        // 推荐频道不可被删除
        if (inx === 0) return
        // 如果点击需要删除的频道索引小于当前激活状态的索引,则将需要激活状态的索引减一
        if (inx <= this.active) {
          this.$emit('editToJupm', this.active - 1)
        }
        this.pindaoList.splice(inx, 1)
      } else {
        this.$emit('editToJupm', inx, false)
      }
    },
    // 获取所有频道数据方法
    async getAllChannelList() {
      try {
        const { data } = await getAllChannelListAPI()
        this.$toast.success('获取所有频道数据成功!')
        this.allChannelList = data.data.channels
        console.log(this.allChannelList)
      } catch (error) {
        this.$toast.fail('获取频道数据失败!')
      }
    },
    // 点击推荐频道加入到我的频道
    addPindao(obj) {
      // 添加推荐频道到我的频道时先判断是否登录,如果没有登录数据持久化方式采用
      // 本地存储方式,如果已经登录就调用线上接口将数据存入服务器

      this.pindaoList.push(obj)
    }
  },
  created() {
    this.getAllChannelList()
  }
}
</script>

<style scoped lang="less">
.redfont {
  color: red;
}
.channer-edit {
  padding: 85px 0;
  /deep/.mypindao {
    .van-grid-item__text {
      margin-top: 0;
      font-size: 28px !important;
    }
    .gongtext {
      font-size: 28px !important;
      color: red;
    }
    .van-grid-item__icon-wrapper,
    .van-hairline {
      position: unset;
    }
    /deep/.myIcon-guanbi {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 35px;
      z-index: 3;
    }
  }
  .allpindao {
    /deep/.van-grid-item__content {
      flex-direction: row;
      .van-icon-plus::before {
        font-size: 38px;
      }
      .van-grid-item__text {
        margin-top: 0;
        font-size: 28px;
      }
    }
  }
}
</style>
